import { Card, Tooltip } from 'antd';
import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';

const DataCard = () => {
  const dataList = [
    { title: 'ERP会员总数', value: 284512, comparisonValue: 1987, isRise: true },
    { title: '公众号粉丝数', value: 5684, comparisonValue: 65, isRise: false },
    { title: '开卡会员数', value: 8795, comparisonValue: 456, isRise: true },
    { title: '累计绑定会员数', value: 57578, comparisonValue: 245, isRise: false },
    { title: '累计购买会员数', value: 198632, comparisonValue: 2678, isRise: true },
    { title: 'ERP会员激活数', value: 27318, comparisonValue: 678, isRise: true },
  ];

  return (
    <div className="flex justify-between">
      {dataList.map((item, index) => (
        <Card className="flex-1 mr-24 last:mr-0" key={index}>
          <div className={`text-18 font-bold flex items-center`}>
            {item.title}
            <Tooltip title={`这是 ${item.title} 的提示`} className="cursor-pointer">
              <InfoCircleOutlined className="text-color-paragraph ml-4" />
            </Tooltip>
          </div>
          <div className="flex mt-12 text-16">
            <div className="flex-1">
              <span className="font-bold">{item.value}</span>
            </div>
            <div className="flex-1 flex items-center">
              {item.isRise ? (
                <CaretUpOutlined className="text-success-color" />
              ) : (
                <CaretDownOutlined className="text-danger-color" />
              )}
              <span className={item.isRise ? 'text-success-color' : 'text-danger-color'}>{item.comparisonValue}</span>
            </div>
          </div>
        </Card>
      ))}
    </div>
  );
};
export default DataCard;
